<template>
	<view class="content">
		<view class="flex-top-header borde-padd-24">
			<view class="search flex-line-height">
				<image class="search-img" :src="imgUrl+'/search.png'" mode=""></image>
				<input class="input" style="width: 80%;" type="checkbox" name="" placeholder="搜索职位/课程" id="">
			</view>
			<view class="kechengTiku flex-height-between">
				<view class="tablist active">课程</view>
				<view class="tablist">题库</view>
			</view>
		</view>
		<view class="borde-padd-24 orderforgoods">
			<view class="tabList-arr">
				<view class="orderforgoods-title flex-height-between">
					<view class="tim">2024-10-20 11:20:32</view>
					<view class="stu">已完成</view>
				</view>
				<view class="flex-height-between">
					<image class="left-ings" :src="imgUrl+'/b921d3ffd0621ed2a8f04e5246fd2997.png'" mode=""></image>
					<view class="conterArr">
						<view class="ellipsis title">产品训练营第二期产品训练营第二期</view>
						<view class="conte">
							<text class="lis active">共12讲</text>
							<text class="lis">1234人已报名</text>
						</view>
					</view>
				</view>
				<view class="orderforgoods-title  flex-line-height flex-height-between" style="padding-top: 20rpx;">
					<view class="tim">订单编号: 2024105521321414</view>
					<view class="flex money flex-line-height">
						实际支付  <view class="flex-line-height moneyIfo">
							 <view class="fuhao">¥</view> 38.6
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		components:{
		},
	    data() {
	        return {
	            indicatorDots: false,
				imgUrl:this.imgUrl,
	        }
	    },
	    methods: {
	       
	    }
	}
	
</script>

<style scoped>
	.flex-top-header{
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		padding-top: 20rpx;
	}
	.flex-top-header .search{
		height: 68rpx;
		background: #F7F8FA;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
	}
	.flex-top-header .search-img{
		width: 28rpx;
		height: 28rpx;
		margin-right: 24rpx;
	}
	.flex-top-header .input{
		width: 104rpx;
		height: 37rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.kechengTiku{
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.tablist{
		flex: 1;
		line-height: 90rpx;
		text-align: center;
	}
	.tablist.active{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: center;
		font-style: normal;
		position: relative;
		text-transform: none;
	}
	.tablist.active::after{
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 50%;
		transform: translate(-50%);
		width: 48rpx;
		height: 4rpx;
		background: #3B5EEC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.orderforgoods{
		padding-top: 16rpx;
	}
	.tabList-arr{
		width: 702rpx;
		height: 282rpx;
		box-sizing: border-box;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.orderforgoods-title{
		margin-bottom: 24rpx;
	}
	.orderforgoods-title .tim{
		font-family: MiSans, MiSans;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.orderforgoods-title .stu{
		width: 90rpx;
		height: 40rpx;
		background: #32D999;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		text-align: center;
		line-height: 40rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.left-ings{
		width: 184rpx;
		border-radius: 16rpx;
		height: 104rpx;
		margin-right: 16rpx;
	}
	.conterArr{
			box-sizing: border-box;
		}
			  .title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #0D0E0F;
				text-align: left;
				font-style: normal;
				text-transform: none;
		}
		.questionbank-conter{
			margin-bottom: 40rpx;
		}
		.conte  .lis{
		height: 40rpx;
		background: #F2F4F7;
		box-sizing: border-box;
		padding: 5rpx 12rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		margin-right: 8rpx;
		text-transform: none;
	}
		 .money{
		font-family: MiSans, MiSans;
		font-weight: 600;
		margin-top: 16rpx;
		font-size: 32rpx;
		color: #E26262;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
		 .fuho{
		font-size: 24rpx;
		padding-top: 9rpx;
		margin-right: 5rpx;
	}
	.jilisy{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		padding-top: 16rpx;
		text-transform: none;
	}
	.conterArr .conte  .lis.active{
		background: #F0F2FC;
		color: #3B5EEC;
	}
	.tabList-arr .money{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.tabList-arr .fuhao{
		font-family: MiSans, MiSans;
		font-weight: 500;
		font-size: 24rpx;
		color: #0D0E0F;
		text-align: left;
		margin-top: 10rpx;
		font-style: normal;
		margin-left: 8rpx;
		text-transform: none;
	}
	.tabList-arr .moneyIfo{
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 32rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>